<div class="page-title" style="padding: 2rem 0;">
</div>
<div id="center-container">
	<div class="row mb-3 header-row mb-3">
		<div class="col-9">
			<div class="form-title">
				<h2 data-trans='quick_guide'></h2>
			</div>
		</div>
		<div class="col-3 text-right" >
			<a  href="#" id="skip" data-trans="skip" data-bind="click: setSkipSetting"/></a>
		</div>
	</div>
	<div class="row mb-3">
		<div class="">
			<div class="mt-4" id="noSimCableDiv" style="display: none;">
				<div class="content mt-4">
					<div class="row mt-3">
						<div class="col-12 text-center">
							<div>
								<img src="./img/img_insert_sim .png?v=1736213398713" />
							</div>
							<div class="mt-3">
								<span class="colorRed" data-trans="connetion_setttings_info"></span>
							</div>
							<div class="mt-3">
								<input type="button" class="btn btn-primary" data-trans='continue_anyway' data-bind="click:goToGuideImg1" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id='wifiQuickSetting'>
				<div id="stepOneDiv" class="text-center step-indicator-container" style="display: none;">
					<ul class="step-indicator">
						<li class="one active" data-trans="step_wifi_settings"></li>
						<li class="two" data-trans="init_complete"></li>
					</ul>
				</div>			
				<form id="frmSSID1">
					<div id="wifiDiv" style="display: none;">							
						<div class="form-title hide">
							<h6 data-trans="wifi" class="margin-top-0"></h6>
						</div>
						<div class="content">
							<div>
								<div class="row mb-3 col-12" data-bind="visible: showWifiMoveSuccess">
									<span class="colorRed" data-trans="wifi_move_success"></span>
								</div>

								<div class="row mb-3" data-bind="visible: wifi_enable && false">
									<label class="col-8 col-md-4  col-sm-6  side-right" data-trans="band_steering"></label>
									<div class="col-3   form-switch">
										<input class="form-check-input" type="checkbox" name="band_steering_switch" id="band_steering_switch" data-bind="checked : band_steering_enable" />
									</div>
								</div>
								<div class="row mb-3 help-info pb-3 width-100" data-bind="visible: wifi_enable && false">
									<label class="col-12 side-right" data-trans="band_steering_intro_info"></label>
								</div>

								<div class="form-title" data-bind="visible:!band_steering_enable()">
									<h6 data-trans="wifi_wireless_settings"></h6>
								</div>

								<div class="row mb-3 ">
									<label class="col-md-3 side-right col-form-label" for="ssid" data-trans="network_name"></label>
									<div class="col-md-6 col-12">
										<input type="text" name="ssid" data-bind="value: ssid" id="ssid"
											class="required form-control" maxlength="29" autocomplete="off"/>
									</div>
								</div>
								<div id="passwordContainer" class="row mb-3 ">
									<label class="col-md-3 side-right col-form-label" for='pass' data-trans='pass_phrase'></label>
									<div class="col-md-6 col-12 position-relative">
											<span class="pass-icon"></span>
										<input id='pass' name="pass" type="password" data-bind="value: passPhrase"
											class="required form-control" minlength='8' maxlength='63' />
										<div id="lblShowPassword" class="clear"></div>
									</div>
									<div class="col-md-2 col-2 Strength-div-md ">
										<div class="Strength">
											<div id="passStrength">
											</div>
										</div>
									</div>
								</div>

								<div class="row mb-3" data-bind="visible:!band_steering_enable()&&false">
										<div class="col-md-8">
												<input id="syn24gAnd5gCheckbox" class="form-check-input" name="syn24gAnd5gCheckbox" type="checkbox"
													data-bind="checked: syn24gAnd5g" value="1" />
											<label for="syn24gAnd5gCheckbox" data-trans="wifi_ssid_syn_to5g"></label>
										</div>
								</div>
								<!-- <div class="row mb-3 ">
									<a class="col-12" href="javascript:void(0)" data-bind="click: wifiMoveHandler"
										data-trans="use_old_settings_wifi"></a>
								</div> -->
							</div>
						</div>
						<div data-bind="visible:!band_steering_enable() && !syn24gAnd5g()&&false">
							<div class="form-title" id="ssid1_5G_title_div">
								<h6 data-trans="wifi_basic_5g"></h6>
							</div>
							<div id="ssid1_5G_div" class="content">
								<div class="row mb-3 ">
									<label class="col-md-3 side-right col-form-label" for="ssid_5G" data-trans="network_name"></label>
									<div class="col-md-6 col-12">
										<input type="text" name="ssid_5G" data-bind="value: ssid_5G" id="ssid_5G" autocomplete="off"
											class="required form-control" maxlength="32" />
									</div>
								</div>
								<div id="passwordContainer_5G" class="row mb-3 ">
									<label class="col-md-3 side-right col-form-label" for='pass_5G' data-trans='pass_phrase'></label>
									<div class="col-md-6 col-12 position-relative">
											<span class="pass-icon"></span>
											<input id='pass_5G' name="pass_5G" type="password"
												data-bind="value: passPhrase_5G"
												class="required form-control" minlength='8' maxlength='32' />
											<div id="lblShowPassword_5G" class="clear"></div>
										</div>
									<div class="col-md-2 col-2 Strength-div-md">
										<div class="Strength">
											<div id="passStrength_5G">
											</div>
										</div>
									</div>
									
								</div>

							</div>
						</div>

						<div class="form-title" data-bind="visible: !sameLoginSetting()">
							<h6 data-trans="login_password_setting"></h6>
						</div>
						<div class="content" data-bind="visible: !sameLoginSetting()" style="height: 80px;">
							<div class="row mb-3 ">
								<label class="col-3 side-right" for="ssid_5G"
									data-trans="password_management"></label>
								<div class="col-6">
									<input id="txtLoginPwd" autocomplete="off" class="required form-control"
										type="password"
										data-bind="value:loginPassword, visible:!showLoginPassword(), valueUpdate: 'keypress'"
										minlength="5" maxlength="32" name="txtLoginPwd" />
									<input id="txtLoginPwdShow" autocomplete="off" class="required form-control"
										type="text"
										data-bind="value:loginPassword, visible:showLoginPassword(), valueUpdate: 'keypress'"
										minlength="5" maxlength="32" name="txtLoginPwdShow" />
									<div class="margin-top-10">
											<input id="showPasswordLogin" name="showPasswordLogin" type="checkbox"
												data-bind="checked:showLoginPassword" />
										<label for="showPasswordLogin" class="floatleft lineheight25 margintop5"
											data-trans="display_password"></label>
									</div>
									<div id="lblLoginPassword" class="clear"></div>
								</div>
								<div class="col-3">
									<div class="Strength">
										<div id="loginPassStrength">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="form-buttons width-100">
							<input id="ssid1_apply" type="submit" class="btn btn-primary"  data-trans='next_step' />
						</div>
					</div>
					<div id="guideImg1Div" style="display:none;">
						<div class="text-center step-indicator-container">
							<ul class="step-indicator">
								<li class="one done" data-trans="step_wifi_settings"></li>
								<li class="two active" data-trans="init_complete"></li>
							  </ul>
						</div>
						<div class="row mb-3 ">
							<div class="col-12 text-center mb-3">
								<img src="./svg_img/modal_success.svg" height="64"/>
							</div>
							<div class="col-12 col-offset-1 text-center margin-top-20">
								<span data-trans="wifi_init_resart_info"></span>
								<div data-bind="visible: band_steering_enable" class="mt-3">
									<span data-trans="pc_current_wifi_info" ></span><span data-bind=" text: currentWifi" ></span>
									<br/><span data-trans="pc_current_wifi_pass" ></span> <span data-bind=" text: currentWifiPass" ></span>
								</div>
								<div data-bind="visible: !band_steering_enable()" class="mt-3">
									<span data-trans="pc_current_wifi_info"></span><span data-bind=" text: currentWifi24" ></span>
									<br/><span data-trans="pc_current_wifi_pass"></span><span data-bind=" text: currentWifi24Pass" ></span>
									<!-- <br/><span data-trans="pc_current_wifi_info5" ></span><span data-bind=" text: currentWifi5" ></span>
									<br/><span data-trans="pc_current_wifi_pass5"></span><span data-bind=" text: currentWifi5Pass" ></span> -->
								</div>
								<br/>
								<div data-bind="visible: isSupportSmartLife">
									<img width="100px" height="100px" src="./img/appqr.png?v=1736213398713" />
									<br/><span data-trans="applet_title"></span>
									<p data-trans="ztelink_scan_info"></p>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>

			<div class="wifiMoveDiv" id="wifiMoveDiv" style="display: none;">
				<div class="form-title">
					<h6 data-trans="wifi_move_title" class="margin-top-0"></h6>
				</div>
				<div class="content">
					<div class="row mb-3 ">
						<div class="col-12">
							<div class="text-center">
								<img data-bind="attr: {src: language() == 'en'? './img/img_wifi_moving_en.png?v=1736213398713' : './img/img_wifi_moving_en.png?v=1736213398713'}" />
							</div>
							<div>
								<p class="margin-top-5" style="font-size: 16px; margin-bottom: 4px;" data-trans="wifi_move_info"></p>
								<span data-trans="wifi_move_tips"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="form-buttons width-100 mt-4">
					<input style="background-color: white;color:#13A7EF;" type="button" class="btn btn-primary"
						data-trans='prev_step' data-bind="click:backToWifiQuickSetting" />
					<input type="button" class="btn btn-primary" data-trans='move_start'
						data-bind="click: starWifiMove" />
				</div>
			</div>

			<!-- <div id="wifiMoveDiv" class="modal modal-md" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
				<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" data-trans="wifi_move_title"></h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<div class="row mb-3 ">
								<div class="col-12">
									<div>
										<img data-bind="attr: {src: language() == 'zh-cn'? './img/img_wifi_moving_ch.png?v=1736213398713' : './img/img_wifi_moving_en.png?v=1736213398713'}" />
									</div>
									<div>
										<p class="margin-top-5" style="font-size: 16px;" data-trans="wifi_move_info"></p>
										<span data-trans="wifi_move_tips"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer center-button">
							<input type="button" class="btn btn-primary" data-trans='move_start'
							data-bind="click: starWifiMove" />
						</div>
					</div>
				</div>
			</div> -->




			<div class="" id="wifiMoveWaitDiv" style="display: none;">
				<div class="form-title">
					<h6 data-trans="wifi_move_title" class="margin-top-0"></h6>
				</div>
				<div class="content">
					<div class="row mb-3 ">
						<div class="col-12 text-center">
							<div>
								<img src="./img/img_moving_animation.gif" />
							</div>
							<div>
								<span data-trans="wifi_move_wait"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>